<script setup lang="ts">
import { PropType, reactive, watch, ref } from 'vue'
import { ElTable, ElTableColumn, ElImage } from 'element-plus'
import { Form } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import { useForm } from '@/hooks/web/useForm'
import { required } from '@/utils/formRules'
import { adminCsOrderSeeApi } from '@/api/cs/order'
import { LeeInputNumber } from '@/components/LeeInputNumber'

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})
const data = ref<any>({})
const seeApi = async () => {
  const res: any = await adminCsOrderSeeApi({ order_id: props.currentRow.order_id })
    .catch(() => {})
    .finally(() => {})
  data.value = res.data
  console.log('data', data.value)
}
seeApi()

const rules = reactive({
  goods_name: [required]
})

const { register, methods, elFormRef } = useForm({
  schema: props.formSchema
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    const { setValues } = methods
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

const getFormData = async () => {
  let formData = await methods.getFormData()
  return { ...formData }
}

defineExpose({
  elFormRef,
  getFormData
})
</script>

<template>
  <div>
    <Form :rules="rules" @register="register" />
    <div class="p-10px">
      <ContentWrap title="商品明细">
        <el-table :data="data.goodsData" :border="true" style="width: 100%">
          <el-table-column label="缩略图URL" prop="goods_thumbnail" width="140">
            <template #default="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.goods_thumbnail"
                fit="contain"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column label="主键" prop="order_goods_id" width="60" /> -->
          <!-- <el-table-column label="所属订单" prop="order_id" width="100" /> -->
          <!-- <el-table-column label="商品ID" prop="goods_id" width="100" /> -->
          <el-table-column label="商品名称" prop="goods_name" width="100" />
          <el-table-column label="商品编号" prop="goods_sn" width="140" />
          <el-table-column label="商品价格" prop="goods_price" width="180">
            <template #default="scope">
              <LeeInputNumber
                v-model="data.goodsData[scope.$index].goods_price"
                precision="2"
                step="1"
                mix="0"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column label="市场价格" prop="market_price" width="180" /> -->
          <el-table-column label="商品数量" prop="goods_number" width="180">
            <template #default="scope">
              <LeeInputNumber v-model="data.goodsData[scope.$index].goods_number" :mix="0" />
            </template>
          </el-table-column>
          <!-- <el-table-column label="规格ID" prop="goods_sku_id" width="180" /> -->
          <el-table-column label="所选规格" prop="goods_sku_specs" width="180" />
        </el-table>
        <!-- {{ data.goodsData }} -->
      </ContentWrap>
    </div>
  </div>
</template>
